<template>
  <div id="dictionary-manage">
    <div class="dictionary-manage-main">
      <Form inline :label-colon="true"  :label-width="110">
        <FormItem label="数据字典名称" >
          <Input v-model="params.itemName" placeholder="请输入数据字典名称"/>
        </FormItem>
        <FormItem>
          <Button
          ref="searchbtn"
            type="primary"
            @click="publicGetData()"
            style="margin-right: 10px;margin-left: -100px"
            v-auth="'列表'"
          >搜索</Button>
          <Button type="primary" @click="publicUpdateData()" v-auth="'新增'">新增</Button>
        </FormItem>
      </Form>
      <Card title="数据字典类型" icon="ios-options" :padding="0" shadow class="dictionary-manage--main-card" v-if="dictionaryGroupList.length > 0">
        <CellGroup  @on-click="handleClickCell">
            <Cell
              v-for="item in dictionaryGroupList"
              :key = "item.itemCode"
              :name = "item.itemCode"
              :title="item.itemName"
              :selected = "active === item.itemCode"
            />
        </CellGroup>
      </Card>
      <Breadcrumb></Breadcrumb>
      <BaseTable
        v-if="params.rfRootCode"
        class="base-table"
        ref="baseTable"
        :menu-code="menuCode"
        :init-params="params"
        update-btn-extra-param="state"
        :update-btn-extra-val="0"
        :action="action.readDataByPage"
        :columns="columns"
        :public-btn="['delete', 'update']"
        @handleRemove="publicRemoveData"
        @handleUpdate="publicUpdateData"
      />
    </div>
    <Drawer
      :title="viewParams.title"
      v-model="viewParams.flag"
      :width="35"
       draggable
      @on-visible-change="publicVisibleChange"
    >
      <DictionaryManageUpdate
        :type="type"
        @closeView="publicCloseView"
        :key="isRefreshView"
        :idName="idName"
        :dictionaryGroupName="dictionaryGroupName"
        :dictionaryGroupId="params.rfRootCode"
        :moduleId="id"/>
    </Drawer>
  </div>
</template>

<script>
import { tableMixin } from '../../../mixin'
import columns from './dictionary-manage-columns'
import API_KEY from '../../../api'
import { getDictionaryGroupSelect } from '../../../api/modules/system/dictionary'
export default {
  name: 'DictionaryManage',
  mixins: [tableMixin],
  data () {
    return {
      params: {
        itemName: '',
        rfRootCode: ''
      },
      action: {
        readDataByPage: API_KEY.dictionary.readDataByPage,
        removeDataByKey: API_KEY.dictionary.curdDictionary
      },

      menuCode: 'system-dictionary',
      columns,
      active: 0,
      dictionaryGroupList: [],
      dictionaryGroupName: '',
      idName: 'id',
      id: '',
      suffix: '数据字典信息'
    }
  },
  mounted () {
    this.privateInit()
  },
  methods: {
    /**
     * 可用作初始化
     */
    privateInit () {
      // 获取数据字典类型
      // const than = this
      getDictionaryGroupSelect().then(({ data }) => {
        this.dictionaryGroupList = data
        this.active = data[0].itemCode
        // 默认选择第一个
        if (data.length > 0) {
          // 数据字典类型
          this.dictionaryGroupName = data[0].itemName
          this.params.rfRootCode = data[0].itemCode
          // this.publicGetData()
        }
      })
    },

    /**
     * 点击左侧返回
     * @param name
     */
    handleClickCell (name) {
      this.active = name
      this.dictionaryGroupList.forEach((item, index) => {
        if (item.itemCode === name) {
          // 数据字典类型
          this.dictionaryGroupName = item.itemName
          this.params.rfRootCode = item.itemCode
        }
      })
      this.publicGetData()
    }
  },
  components: {
    DictionaryManageUpdate: () => import('./DictionaryManageUpdate')
  }
}
</script>

<style scoped lang="scss">
@import "../../../assets/styles/scss/mixin";
#dictionary-manage{
  .dictionary-manage-main{
    .dictionary-manage--main-card{
      width: 260px;
      margin-top: -13px;
      @include floatMixer();
      margin-right: 20px;
    }
  }
}
</style>
